<template>
  <div class="view-container animate__animated animate__fadeInDown">

    <div class="title-box">
      <h1 class="view-title">新生列表</h1>
      <div class="pagination-flag">
        <label>单页时不显示分页：</label>
        <el-switch v-model="hideFlag" />
      </div>
    </div>

    <div class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="userid" label="用户名" width="100" />
        <el-table-column fixed prop="name" label="姓名" width="80" />
        <el-table-column prop="freshmanId" label="新生编号" width="80" />
        <el-table-column prop="major" label="专业" width="150" />
        <el-table-column prop="enrollmentDate" label="入学时间" width="300" />
        <el-table-column prop="sourceLocation" label="生源地" width="250" />
        <el-table-column prop="previousSchool" label="母校" width="200" />
        <el-table-column prop="phone" label="电话" width="120" />
        <el-table-column prop="hasCheckedIn" label="是否报道" width="80" />
        <el-table-column prop="education" label="学历" width="100" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <div class="table-button-group">
              <el-button type="primary" size="small" @click="handleDetail(scope.$index, scope.row)" class="table-button">
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-class">
        <el-pagination
            :hide-on-single-page="hideFlag"
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20, 30, 40, 50]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import router from "@/router/index.js";
import {getFreshmanPage} from "@/api/freshmanApi/freshmanApi.js";
import {ElMessage} from "element-plus";
/*-------------定义变量开始--------------*/
const searchData = reactive({
  page: 0,
  limit: 10,
});
//只有单页时是否隐藏分页
const hideFlag = ref(false)
//当前页码
const currentPage = ref(1);
//每页条数
const pageSize = ref(10);
//数据总条数
const total = ref(100);
//表格数据
const tableData = ref([]);
const fakeData =[

]
/*-------------定义变量结束--------------*/

/*-------------页面挂载开始--------------*/
onMounted(() => {
  getFreshmanPage(searchData).then(res => {
    if(res.status === 200){
      //查询成功
      tableData.value = res.data.pageList
      total.value = res.data.total;
    }
  }).catch(() => {
    ElMessage("查询失败")
  })
})
/*-------------页面挂载结束--------------*/

/*-------------定义函数开始--------------*/
//查询学生
const searchFreshman = () => {
  //加入页码
  searchData.page = currentPage.value;
  //加入每页条数
  searchData.limit = pageSize.value;

  //请求接口
  getFreshmanPage(searchData).then(res => {
    if(res.status === 200){
      //查询成功
      tableData.value = res.data.pageList
      total.value = res.data.total;
    }
  }).catch(() => {
    ElMessage("查询失败")
  })
}
//删除按钮点击事件
const handleDetail = (index, row) => {
  router.push("/userManage/userDetail/"+row.userid)
}
//切换每页条数触发的事件
const handleSizeChange = (val) => {
  pageSize.value = val;
  searchFreshman();
}
//切换页码的时候触发的事件
const handleCurrentChange = (val) => {
  currentPage.value = val;
  searchFreshman();
}
/*-------------定义函数结束--------------*/


</script>

<style scoped>
.view-container{
  padding-top: 40px;
  width: 80%;
  overflow: hidden;
  animation-duration: 0.5s;
}
.view-title{
  font-size: 40px;
  font-weight: bolder;
  margin-bottom: 30px;
}
.pagination-flag{
  float: right;
}
.table-button-group{
  display: flex;
  align-items: center;
}
.table-button{
  padding: 0;
  width: 70px;
}
.page-class{
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

</style>
